<template>
  <view class="tabarClass">
    <uv-tabbar :zIndex="10000" :activeColor="diyData.theme.color" :border="false" :value="value" :fixed="true" @change="change">
      <template v-for="(item,idx) in properties.setStyle.iconList">
        <uv-tabbar-item :text="item.text">
          <template v-slot:active-icon>
            <image :style="{
                width: properties.setStyle.iconWidth +'rpx',
                height: properties.setStyle.iconHeight +'rpx'
      }" :src="item.activeIcon"></image>
          </template>
          <template v-slot:inactive-icon>
            <image :style="{
              width: properties.setStyle.iconWidth +'rpx',
                height: properties.setStyle.iconHeight +'rpx'
      }" :src="item.inactiveIcon"></image>
          </template>
        </uv-tabbar-item>
      </template>
    </uv-tabbar>
  </view>
</template>
<script>
import diyJson from '@/config/diy.js';
// 分割线
export default {
  name: "Tabar",
  data() {
    return {
      diyData: diyJson.commonStyle,
    }
  },
  props: {
    app: {
      type: Object,
      default() {
        return {};
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    properties: {
      type: Object,
      default: function () {
        return {
          "component": "tabBar",
          "text": "底部导航",
          "type": "1-5",
          "active": false,
          "style": "tabBarStyle",
          "setStyle": {
            "text": "底部导航",
            "activeColor": "rgba(255, 140, 0, 1)",
            "inactiveColor": "#7d7e80",
            "isShowBorder": true,
            "iconWidth": "40",
            "iconHeight": "40",
            "fontSize": "14",
            "Highlight": "home",
            "iconList": [
              {
                "activeIcon": '/static/images/index-selected.png',
                "inactiveIcon": '/static/images/index.png',
                "page": '/pages/index/index',
                "text": '首页',
              },
              {
                "activeIcon": '/static/images/order-sele.png',
                "inactiveIcon": '/static/images/order-sele1ed.png',
                "page": '/pages/order/index',
                "text": '抢单池',
              },
              {
                "activeIcon": '/static/images/peisong-tabar.png',
                "inactiveIcon": '/static/images/peisong.png',
                "page": '/pages/deliveryOrder/index',
                "text": '配送单',
              },
              {
                "activeIcon": '/static/images/me-selected.png',
                "inactiveIcon": '/static/images/me.png',
                "page": '/pages/user/index',
                "text": '我的',
              }
            ]
          }
        }
      }
    },
  },
  computed: {
    value: {
      get() {
        return this.activeIndex;
      },
      set(newIndex) {
        // 使用事件通知父组件更新 prop 的值
        this.$emit('tabBarIndexChange', newIndex);
      },
    },
  },
  methods: {
    change(i) {
      this.value = i;
      let tab = this.properties.setStyle.iconList[i];
      console.log("tab",tab)
      this.app.globalData.tabBarIndex = i;
      uni.$emit("tabBarIndexChange", i);
      this.$store.commit('SET_TAB_BAR_IDX',i);
      uni.switchTab({
        "url": tab.page
      })
    }
  },
  watch: {
    activeIndex:function (newV,old){
        console.log("tabbar监听",newV)
    }
  },

  created() {
    uni.$on("tabBarIndexChange", (idx) => {
      this.value = idx;
    })
    this.value = this.app.globalData.tabBarIndex;
  }
}
</script>

<style scoped lang="scss">
.icon {

}
.tabarClass{
  height: 100px;
}
</style>
